/* ---------- tour (ported from the Cerebras console) ---------- */
:root { --pt-brand: #1d4ed8; --pt-brand-soft: #eff6ff; --pt-z: 2000000000; }
/* Reset the host page's element styles (e.g. the portal gives every button
   min-width:100px). :where() keeps this at element specificity so the
   pt-* class rules below still win. */
:where(.pt-root, .pt-hint) button { all: unset; box-sizing: border-box; cursor: pointer; }
:where(.pt-root, .pt-hint) :is(h2, h3, p) { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; font-family: inherit; }
.pt-root, .pt-hint { font-family: inherit; }
.pt-root { position: fixed; inset: 0; z-index: var(--pt-z); }
.pt-frosted { display: flex; align-items: center; justify-content: center; padding: 48px; background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: pt-fade 200ms ease-out; }
.pt-welcome { position: relative; width: 100%; max-width: 460px; padding: 32px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; box-shadow: 0 24px 70px -12px rgba(0,0,0,.45); }
.pt-welcome-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-right: 32px; }
.pt-welcome h2 { margin: 0; font-size: 20px; color: #111827; }
.pt-welcome p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #6b7280; }
.pt-welcome p:last-of-type { margin-bottom: 24px; }
.pt-welcome-actions { display: flex; justify-content: flex-end; gap: 12px; }
.pt-icon-lg { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--pt-brand-soft); color: var(--pt-brand); display: grid; place-items: center; }
.pt-icon-lg svg { width: 24px; height: 24px; }
.pt-icon-sm { flex: none; width: 32px; height: 32px; border-radius: 6px; background: var(--pt-brand-soft); color: var(--pt-brand); display: grid; place-items: center; }
.pt-icon-sm svg { width: 16px; height: 16px; }

.pt-x { position: absolute; top: 12px; right: 12px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: #6b7280; cursor: pointer; display: grid; transition: background 120ms, color 120ms; }
.pt-x:hover { background: #f3f4f6; color: #111827; }
.pt-x svg { width: 16px; height: 16px; }

.pt-btn { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 16px; border-radius: 4px; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: background 120ms; }
.pt-btn svg { width: 16px; height: 16px; }
.pt-small { height: 32px; padding: 0 12px; font-size: 13px; }
.pt-primary { background: var(--pt-brand); color: #fff; }
.pt-primary:hover { background: #1e40af; }
.pt-secondary { background: #fff; color: #111827; border-color: #d1d5db; }
.pt-secondary:hover { background: #f9fafb; }

.pt-panel { position: absolute; pointer-events: auto; background: rgba(255,255,255,.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.pt-ring { position: absolute; pointer-events: none; border-radius: 8px; box-shadow: 0 0 0 2px var(--pt-brand); transition: all 300ms ease-out; }
.pt-arrow { position: absolute; width: 12px; height: 12px; transform: rotate(45deg); background: #fff; border: 0 solid #e5e7eb; pointer-events: none; transition: all 300ms ease-out; z-index: 1; }
.pt-arrow-up { border-left-width: 1px; border-top-width: 1px; }
.pt-arrow-down { border-right-width: 1px; border-bottom-width: 1px; }
.pt-card-wrap { position: absolute; transition: all 300ms ease-out; }
.pt-card { position: relative; width: 372px; padding: 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; box-shadow: 0 24px 70px -12px rgba(0,0,0,.35); }
.pt-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 24px; }
.pt-card h3 { margin: 0; font-size: 16px; color: #111827; }
.pt-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #6b7280; }
.pt-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.pt-dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pt-dot { height: 6px; width: 6px; padding: 0; border: 0; border-radius: 999px; background: #d1d5db; cursor: pointer; transition: all 200ms; }
.pt-dot:hover { background: #9ca3af; }
.pt-dot-on { width: 20px; background: var(--pt-brand); }
.pt-count { font-size: 10px; font-weight: 500; color: #9ca3af; }

.pt-hint { position: fixed; left: 0; right: 0; z-index: var(--pt-z); pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  animation: pt-hint-in 200ms ease-out, pt-hint-in 300ms ease-in 4.7s reverse forwards; }
.pt-hint-arrow { color: var(--pt-brand); animation: pt-bounce 1s ease-in-out infinite; }
.pt-hint-arrow svg { width: 24px; height: 24px; stroke-width: 2.5; }
.pt-hint-box { margin-right: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #111827; box-shadow: 0 12px 40px -12px rgba(0,0,0,.3); }
.pt-hint-box svg { width: 16px; height: 16px; color: var(--pt-brand); }

@keyframes pt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-hint-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .pt-ring, .pt-arrow, .pt-card-wrap, .pt-dot { transition: none; }
  .pt-hint-arrow { animation: none; }
}
/* Start tour: the welcome card fades out as the first stop fades in. */
.pt-root { transition: opacity 250ms ease-out; }
.pt-entering, .pt-leaving { opacity: 0; }
/* First placement of a step: appear in place, no slide from the corner. */
.pt-no-anim .pt-ring, .pt-no-anim .pt-arrow, .pt-no-anim .pt-card-wrap { transition: none; }

/* Numbered marker pinned beside a section; the card lists the same numbers. */
.pt-marker { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--pt-brand); color: #fff;
  font-weight: 700; font-size: 13px; line-height: 26px; text-align: center; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px -4px rgba(0,0,0,.35); transition: top 300ms ease-out, left 300ms ease-out; }
.pt-no-anim .pt-marker { transition: none; }
.pt-legend { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 14px; color: #374151; }
.pt-legend li { display: flex; align-items: center; gap: 10px; }
.pt-legend b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pt-brand); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
/* The step layer itself lets clicks through, so the lit-up element can be
   used during the tour; the dim panels and the card still catch clicks. */
.pt-root:not(.pt-frosted) { pointer-events: none; }
.pt-root:not(.pt-frosted) .pt-panel, .pt-card-wrap { pointer-events: auto; }

/* "Optional" tag (showcase voice): a feature the manufacturer chooses to turn on. */
.pt-optional { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280;
  font-size: 11px; font-weight: 600; line-height: 16px; }
.pt-card-head .pt-optional { margin-right: 24px; }
.pt-legend li > span:not(.pt-optional) { flex: 1; }

/* Showcase-only line: the manufacturer decides whether customers see this. */
.pt-card p.pt-note { margin: -8px 0 16px; font-size: 13px; color: #9ca3af; font-style: italic; }

/* A picture inside a card (e.g. the browser's date picker). */
.pt-figure { margin: -4px 0 16px; display: flex; justify-content: center; }
.pt-cal { width: 236px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.25); font-size: 12px; color: #111827; }
.pt-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pt-cal-head span { color: #6b7280; letter-spacing: 6px; }
.pt-cal-week, .pt-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.pt-cal-week span { color: #6b7280; font-weight: 600; padding: 2px 0; }
.pt-cal-days span { padding: 3px 0; border-radius: 4px; }
.pt-cal-days .pt-cal-picked { background: var(--pt-brand); color: #fff; }
.pt-cal-days .pt-cal-today { outline: 1px solid var(--pt-brand); outline-offset: -1px; }
.pt-cal-foot { display: flex; justify-content: space-between; margin-top: 6px; color: var(--pt-brand); font-weight: 600; }

/* Welcome card: one-line title with a subtitle under it. */
.pt-welcome h2 { white-space: nowrap; }
.pt-welcome p.pt-subtitle { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: #6b7280; }
.pt-welcome-head { align-items: center; margin-bottom: 20px; }