/* ==================================================================
   Hot Boards — guided tour (coachmark + spotlight overlay)
   Brand-matched: reuses the app's tokens so it tracks dark/light.
   ================================================================== */

/* Full-screen click guard — swallows clicks on the dimmed app while the
   tour drives the steps (the coachmark sits above it and stays clickable). */
.hb-tour-block{position:fixed;inset:0;z-index:2147483600;background:transparent;cursor:default}

/* The spotlight: a transparent rect whose huge box-shadow dims everything
   around it, with a gold ring. The real control shows through the hole. */
.hb-tour-spot{
  position:fixed;z-index:2147483601;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(7,8,10,.66),
             0 0 0 2px var(--gold,#B68A4E),
             0 0 0 7px var(--heat-glow,rgba(182,138,78,.32));
  transition:left .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1),
             width .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] .hb-tour-spot{
  box-shadow:0 0 0 9999px rgba(22,19,14,.45),
             0 0 0 2px var(--gold,#8A6A30),
             0 0 0 7px rgba(138,106,48,.22);
}

/* The coachmark card. */
.hb-tour-coach{
  position:fixed;z-index:2147483602;width:344px;max-width:calc(100vw - 24px);
  background:var(--surface-raised,#15181D);
  border:1px solid var(--border-strong,rgba(255,255,255,.14));
  border-radius:var(--radius-xl,14px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.80),0 0 0 1px rgba(182,138,78,.12);
  padding:16px 17px 14px;color:var(--text-body,#F2EFE8);
  font-family:var(--font-sans,"Inter",system-ui,sans-serif);
  transition:left .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1);
}
.hb-tour-coach.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:448px}
.hb-tour-coach.center .hb-tour-title,
.hb-tour-coach.center .hb-tour-body{text-align:center}

.hb-tour-eyebrow{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--heat-400,#D8AE6E);margin:0 0 7px}
.hb-tour-title{font-family:var(--font-display,"Saira Condensed",system-ui,sans-serif);font-size:21px;font-weight:700;
  letter-spacing:.01em;line-height:1.06;color:var(--text-strong,#FBFAF6);margin:0 0 6px}
.hb-tour-body{font-size:13px;line-height:1.5;color:var(--text-secondary,#BDB7AB);margin:0 0 14px}

.hb-tour-prog{display:flex;gap:3px;margin:0 0 13px}
.hb-tour-seg{flex:1;height:3px;border-radius:2px;background:var(--ink-700,#2A2E36)}
.hb-tour-seg.on{background:var(--gold,#B68A4E)}

.hb-tour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hb-tour-coach.center .hb-tour-foot{justify-content:center}
.hb-tour-skip{font-family:var(--font-sans,"Inter",sans-serif);font-size:12.5px;font-weight:500;
  color:var(--text-muted,#9A958A);background:none;border:none;padding:6px 2px;cursor:pointer;transition:color .15s}
.hb-tour-skip:hover{color:var(--text-secondary,#BDB7AB)}
.hb-tour-rgrp{display:flex;gap:8px}
.hb-tour-btn{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;border-radius:8px;padding:8px 15px;cursor:pointer;
  transition:filter .15s,transform .12s,background .15s}
.hb-tour-back{color:var(--text-secondary,#BDB7AB);background:none;border:1px solid var(--border-strong,#353b45)}
.hb-tour-back:hover{background:var(--surface-hover,rgba(255,255,255,.06))}
.hb-tour-next{color:var(--text-on-heat,#15110A);background:var(--accent-grad,linear-gradient(180deg,#C79A56,#A87C3E));border:none}
.hb-tour-next:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* Welcome / finish card */
.hb-tour-whead{display:flex;align-items:center;justify-content:center;gap:11px;margin:2px 0 12px}
.hb-tour-mark{width:38px;height:38px;border-radius:9px;background:var(--accent-grad,linear-gradient(180deg,#C79A56,#A87C3E));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display,"Saira Condensed",sans-serif);
  font-weight:700;color:var(--text-on-heat,#15110A);font-size:18px;letter-spacing:.02em}
.hb-tour-wm{font-family:var(--font-display,"Saira Condensed",sans-serif);font-weight:700;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
.hb-tour-wm b{color:var(--gold,#B68A4E);font-weight:700}.hb-tour-wm span{color:var(--text-strong,#FBFAF6)}
.hb-tour-chaps{border-top:1px solid var(--border-strong,rgba(255,255,255,.10));border-bottom:1px solid var(--border-strong,rgba(255,255,255,.10));
  margin:4px 0 16px;padding:4px 0;text-align:left}
.hb-tour-chap{display:flex;align-items:center;gap:11px;padding:8px 2px}
.hb-tour-chap+.hb-tour-chap{border-top:1px solid var(--border-soft,rgba(255,255,255,.06))}
.hb-tour-cnum{width:24px;height:24px;border-radius:7px;background:var(--heat-wash,rgba(182,138,78,.13));
  border:1px solid rgba(182,138,78,.30);color:var(--heat-400,#D8AE6E);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:12px;flex-shrink:0}
.hb-tour-clab{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:15px;font-weight:600;letter-spacing:.02em;
  color:var(--text-body,#F2EFE8);flex:1}
.hb-tour-ccount{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:11px;color:var(--text-faint,#837E74)}

/* Visible header "Tour" button (sits next to Help) — gold-accented */
.hdr-tour{color:var(--heat-400,#D8AE6E)!important;border-color:rgba(182,138,78,.45)!important}
.hdr-tour svg{color:var(--heat-400,#D8AE6E)}
.hdr-tour:hover{background:var(--heat-wash,rgba(182,138,78,.14))!important;border-color:var(--heat-500,#B68A4E)!important;color:var(--heat-300,#E6C892)!important}

/* Dashboard "Tour" replay button (masthead) */
.dash-tour-btn{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--heat-400,#D8AE6E);background:none;border:1px solid rgba(182,138,78,.4);border-radius:8px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s}
.dash-tour-btn:hover{background:var(--heat-wash,rgba(182,138,78,.13));border-color:var(--heat-500,#B68A4E)}

/* First-run welcome modal (dashboard) */
.hb-welcome-ov{position:fixed;inset:0;z-index:2147483640;background:rgba(7,8,10,.66);display:flex;align-items:center;justify-content:center;padding:24px}
.hb-welcome-modal{position:relative;width:480px;max-width:100%;background:var(--surface-raised,#15181D);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:18px;box-shadow:0 34px 90px -22px rgba(0,0,0,.88);overflow:hidden}
.hb-welcome-x{position:absolute;top:14px;right:14px;width:26px;height:26px;border:none;background:none;color:var(--text-muted,#9A958A);font-size:15px;cursor:pointer;border-radius:6px}
.hb-welcome-x:hover{color:var(--text-secondary,#BDB7AB);background:var(--surface-hover,rgba(255,255,255,.06))}
.hb-welcome-head{padding:26px 26px 0;text-align:center}
.hb-welcome-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:14px}
.hb-welcome-mark{width:40px;height:40px;border-radius:10px;background:var(--accent-grad,linear-gradient(180deg,#C79A56,#A87C3E));display:flex;align-items:center;justify-content:center;font-family:var(--font-display,"Saira Condensed",sans-serif);font-weight:700;color:var(--text-on-heat,#15110A);font-size:19px;letter-spacing:.02em}
.hb-welcome-wm{font-family:var(--font-display,"Saira Condensed",sans-serif);font-weight:700;font-size:24px;letter-spacing:.03em;text-transform:uppercase}
.hb-welcome-wm b{color:var(--heat-500,#B68A4E)}.hb-welcome-wm span{color:var(--text-strong,#FBFAF6)}
.hb-welcome-badge{display:inline-block;font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--heat-400,#D8AE6E);background:var(--heat-wash,rgba(182,138,78,.13));border:1px solid rgba(182,138,78,.3);padding:3px 10px;border-radius:999px;margin-bottom:12px}
.hb-welcome-ttl{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:27px;font-weight:700;color:var(--text-strong,#FBFAF6);line-height:1.05;margin:0 0 7px}
.hb-welcome-sub{font-size:13.5px;color:var(--text-secondary,#BDB7AB);line-height:1.5;margin:0 auto;max-width:362px}
.hb-welcome-props{padding:20px 26px 6px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hb-welcome-prop{display:flex;gap:10px;align-items:flex-start;background:var(--surface-card,#181B21);border:1px solid var(--border-strong,rgba(255,255,255,.1));border-radius:11px;padding:12px}
.hb-welcome-pic{width:30px;height:30px;border-radius:8px;background:var(--heat-wash,rgba(182,138,78,.12));border:1px solid rgba(182,138,78,.26);color:var(--heat-400,#D8AE6E);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hb-welcome-pt{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:14px;font-weight:600;color:var(--text-strong,#FBFAF6);margin:1px 0 2px}
.hb-welcome-pd{font-size:11.5px;color:var(--text-muted,#9A958A);line-height:1.4}
.hb-welcome-foot{display:flex;align-items:center;justify-content:center;gap:11px;padding:16px 26px 24px}
.hb-welcome-tour{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary,#BDB7AB);background:none;border:1px solid var(--border-strong,#353b45);border-radius:10px;padding:11px 18px;cursor:pointer;transition:background .15s}
.hb-welcome-tour:hover{background:var(--surface-hover,rgba(255,255,255,.06))}
.hb-welcome-build{font-family:var(--font-display,"Saira Condensed",sans-serif);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-on-heat,#15110A);background:var(--accent-grad,linear-gradient(180deg,#C79A56,#A87C3E));border:none;border-radius:10px;padding:12px 22px;cursor:pointer;transition:filter .15s,transform .12s}
.hb-welcome-build:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hb-welcome-soon{text-align:center;font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint,#837E74);padding:14px 26px 0;line-height:1.5}
@media (max-width:520px){.hb-welcome-props{grid-template-columns:1fr}}

/* The "Take the guided tour" link injected into the Help panels */
.hb-tour-link{color:var(--gold,#B68A4E);font-weight:600;text-decoration:none;cursor:pointer}
.hb-tour-link:hover{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .hb-tour-spot,.hb-tour-coach{transition:none}
  .hb-tour-next:hover{transform:none}
}