/* The guide draws on top of the real screen: a dimmed page, one lit field,
   and a bubble beside it. Nothing is ever typed into the form. */
#guide-veil{position:fixed;inset:0;z-index:80;background:rgba(10,7,12,.62);
  backdrop-filter:blur(1px);pointer-events:none}
#guide-ring{position:absolute;z-index:81;border:2px solid var(--accent);border-radius:10px;
  box-shadow:0 0 0 9999px rgba(10,7,12,.62),0 0 22px rgba(224,85,154,.55);
  transition:top .28s,left .28s,width .28s,height .28s;pointer-events:none}
#guide-bubble{position:absolute;z-index:82;max-width:340px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
#guide-bubble h4{margin:0 0 6px;font-size:1rem;color:var(--ink)}
#guide-bubble p{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.6}
#guide-bubble .eg{margin-top:8px;font-size:.86rem;color:var(--accent-2)}
#guide-bubble .row{display:flex;align-items:center;gap:10px;margin-top:14px}
#guide-bubble .row .muted{margin-left:auto;font-size:.78rem}
#guide-tag{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:82;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:.86rem}
/* While recording a guide, hovering marks the field that will become a step. */
.guide-pick{outline:2px dashed var(--accent-2) !important;outline-offset:3px;cursor:crosshair !important}

/* Beside the page's own title, sized to sit next to a heading without shouting. */
#guide-chip{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  margin-left:12px;background:var(--panel-2);color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 14px;
  font:inherit;font-size:.78rem;font-weight:500;line-height:1;cursor:pointer;
  letter-spacing:0;text-transform:none;position:relative;top:-2px}
#guide-chip:hover{background:var(--accent);color:#1a1016;border-color:var(--accent)}