/* portal/public/css/tour.css
 *
 * Product tour — theme-aware modal carousel (approach A).
 * Every color comes from the portal theme tokens (portal.css :root /
 * :root[data-theme="light"]), so a single set of slide markup renders
 * correctly in both light and dark — no duplicate assets, no mode logic.
 *
 * Markup is built by tour.js. Slide "stage" mocks reuse these primitives
 * (and some real portal classes like .p-status-bar) so they read as the
 * real product while still theming for free.
 */

/* ---------- Modal shell (reusable) ---------- */
.tour-overlay{
	position:fixed; inset:0; z-index:1000;
	display:flex; align-items:center; justify-content:center;
	padding:24px;
	background:rgba(8,14,26,.62);
	opacity:0; transition:opacity var(--dur-ui) var(--ease-out);
}
.tour-overlay.is-open{ opacity:1; }

.tour-modal{
	width:min(560px,94vw);
	max-height:92vh; overflow:auto;
	background:var(--panel); color:var(--text);
	border:1px solid var(--border);
	border-radius:var(--radius-modal);
	box-shadow:var(--shadow);
	position:relative;
	transform:translateY(8px); transition:transform var(--dur-ui) var(--ease-out);
}
.tour-overlay.is-open .tour-modal{ transform:none; }

.tour-close{
	position:absolute; top:10px; right:10px; width:30px; height:30px;
	display:flex; align-items:center; justify-content:center;
	border-radius:8px; border:1px solid transparent; background:transparent;
	color:var(--muted); cursor:pointer; font-size:1.25rem; line-height:1;
}
.tour-close:hover{ background:var(--accent); color:var(--text); }

/* ---------- Stage (mini mock of the real screen) ---------- */
.tour-stage{
	background:var(--bg);
	border-bottom:1px solid var(--border);
	padding:22px;
}
.tour-mscreen{ display:flex; flex-direction:column; gap:10px; }
.tour-card{
	background:var(--panel); border:1px solid var(--border);
	border-radius:var(--radius-card); padding:14px 16px; box-shadow:var(--shadow);
}
.tour-mh1{ font-weight:800; font-size:0.9375rem; color:var(--text); }
.tour-mh1 span{ color:var(--muted); font-weight:600; }
.tour-msub{ font-size:0.75rem; color:var(--muted); margin-top:-4px; }

/* step pills (quote form) */
.tour-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.tour-pill{
	font-size:0.6875rem; font-weight:700; padding:5px 10px; border-radius:999px;
	border:1px solid var(--border); background:var(--panel); color:var(--muted);
}
.tour-pill.is-active{ border-color:var(--brand-horizon); background:var(--accent); color:var(--text); }
.tour-pill.is-done{ border-color:rgba(21,128,61,.45); color:var(--text); }

/* fields */
.tour-field{ display:flex; flex-direction:column; gap:4px; }
.tour-field label{ font-size:0.6875rem; color:var(--muted); }
.tour-input{
	border:1px solid var(--border); border-radius:var(--radius-input);
	background:var(--panel); color:var(--text); padding:9px 11px; font-size:0.8125rem;
}
.tour-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* choice pills */
.tour-choices{ display:flex; gap:8px; }
.tour-choice{
	flex:1; text-align:center; font-size:0.75rem; font-weight:600;
	border:1px solid var(--border); border-radius:var(--radius-btn);
	background:var(--panel); color:var(--text); padding:8px;
}
.tour-choice.is-active{ border-color:var(--brand-horizon); background:var(--accent); }

/* key/value summary rows */
.tour-kv{
	display:flex; justify-content:space-between; gap:12px; padding:6px 0;
	border-top:1px solid var(--border); font-size:0.8125rem;
}
.tour-kv:first-child{ border-top:none; }
.tour-kv .k{ color:var(--muted); }
.tour-kv .v{ color:var(--text); font-weight:700; }
.tour-kv.tour-total .v{ font-size:1rem; }

/* mock action buttons */
.tour-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.tour-btn{
	font-size:0.8125rem; font-weight:700; padding:9px 14px; border-radius:var(--radius-btn);
	border:1px solid var(--border); color:var(--text); background:var(--panel);
}
.tour-btn.primary{ background:var(--accent2); border-color:var(--brand-horizon); color:#fff; }

/* document checklist */
.tour-doc{
	display:grid; grid-template-columns:18px 1fr auto; gap:10px; align-items:center;
	padding:10px 0; border-top:1px solid var(--border); font-size:0.8125rem;
}
.tour-doc:first-child{ border-top:none; }
.tour-doc-box{ width:15px; height:15px; border:2px solid var(--muted); border-radius:3px; }
.tour-doc-box.done{ background:var(--accent2); border-color:var(--brand-horizon); position:relative; }
.tour-doc-box.done::after{
	content:"\2713"; color:#fff; font-size:0.6875rem; font-weight:700;
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.tour-up{
	font-size:0.6875rem; font-weight:700; padding:5px 10px; border-radius:var(--radius-btn);
	border:1px solid var(--border); color:var(--text); white-space:nowrap;
}
.tour-up.done{ color:var(--muted); border-color:transparent; }

/* spotlight ring on the element a step is about */
.tour-spot{ position:relative; }
.tour-spot::after{
	content:""; position:absolute; inset:-6px; border-radius:calc(var(--radius-btn) + 6px);
	border:2px solid var(--brand-horizon); box-shadow:0 0 0 4px rgba(58,128,210,.20);
	animation:tourPulse 1.6s var(--ease-standard) infinite; pointer-events:none;
}
@keyframes tourPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
	.tour-spot::after{ animation:none; opacity:.9; }
	.tour-overlay,.tour-modal{ transition:none; }
}

/* ---------- Caption (explanatory text + nav) ---------- */
.tour-caption{ padding:18px 20px 16px; }
.tour-eyebrow{
	font-size:0.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:var(--brand-horizon); margin-bottom:6px;
}
.tour-caption h3{ margin:0 0 6px; font-size:1.0625rem; color:var(--text); }
.tour-caption p{ margin:0; font-size:.875rem; line-height:1.5; color:var(--muted); }
.tour-caption p b{ color:var(--text); }

.tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.tour-dots{ display:flex; gap:7px; }
.tour-dot{
	width:7px; height:7px; border-radius:999px; background:var(--border);
	border:0; padding:0; cursor:pointer;
}
.tour-dot.is-active{ background:var(--brand-horizon); }
.tour-nav-btns{ display:flex; gap:8px; }
.tour-skip{
	display:block; margin:12px auto 0; background:none; border:none; cursor:pointer;
	color:var(--muted); font:inherit; font-size:0.78125rem; text-decoration:underline;
}

/* mock status bar reuse: keep it compact inside the stage */
.tour-stage .p-status-bar{ margin-top:4px; }