/* SPACING: reach for a token — `--card-pad`, `--card-gap`, `--sp-1`…`--sp-6` —
   not a raw rem, and not the value in the rule above. Cards on the padding
   contract are enforced by `test/layout-tokens.test.js`; the contract and the
   list of what is on it are in `docs/visual-language.md` → Tokens. Raw values
   still in this file are legacy from a 2px grid, not a precedent to follow. */
/* The Guide: the sidebar button, the launcher's section list, and the tour overlay
   (a spotlight box whose spread shadow dims the rest of the page, plus a floating card). */
/* Guide and backup sit at the sidebar foot. Shared card look lives with the
   topbar actions in 11-chrome.css — here is only placement and backup state. */
.side-guide,.sidebar #backup-badge{
  flex:0 0 auto;
  width:calc(100% - 1.5rem);
  align-self:center;
}
.side-guide{margin:0 0 var(--sp-2);}
.side-guide svg{color:var(--violet);}
/* Backing up is not money moving — quiet / warn / neg, not money hues. Colour
   lives on the 6px dot; red fill only when data is at risk. */
.sidebar #backup-badge{
  white-space:normal;
  overflow-wrap:anywhere;
}
.sidebar #backup-badge .dot{
  width:0.375rem;height:0.375rem;border-radius:50%;
  background:currentColor;flex:0 0 auto;
}
.sidebar #backup-badge.quiet{color:var(--muted);}
.sidebar #backup-badge.warn{color:var(--accent);}
.sidebar #backup-badge.neg{color:var(--neg);background:var(--tint-red);}
.sidebar #backup-badge.neg:hover{background:var(--tint-red);filter:brightness(1.08);}
/* Launcher */
.guide-lead{font-size:var(--fs-body);color:var(--muted);margin:0 0 var(--sp-4);}
.guide-start{width:100%;justify-content:center;}
.guide-or{
  display:flex;
  align-items:center;
  gap:.625rem;
  margin:1.125rem 0 var(--sp-3);
  font-size:var(--fs-meta);
  color:var(--muted);
  font-weight:500;
}
.guide-or::before,.guide-or::after{content:"";flex:1;height:1px;background:var(--border);}
.guide-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--sp-2);}
.guide-sec{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.15rem;
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface2);
  cursor:pointer;
  text-align:start;
}
.guide-sec:hover{border-color:var(--muted);}
.guide-sec-name{font-size:var(--fs-label);font-weight:600;color:var(--text);}
.guide-sec-count{font-size:var(--fs-micro);color:var(--muted);}
.guide-total{display:block;margin-top:.875rem;font-size:var(--fs-meta);color:var(--muted);}
/* Tour overlay */
#guide-overlay{display:none;position:fixed;inset:0;z-index:600;}
#guide-overlay.open{display:block;}
#guide-spot{
  position:fixed;
  border-radius:var(--radius);
  box-shadow:0 0 0 9999px var(--scrim-strong),0 0 0 2px var(--accent),0 0 1.5rem rgba(0,0,0,.5);
  transition:top var(--hover-dur) var(--hover-ease),left var(--hover-dur) var(--hover-ease),width var(--hover-dur) var(--hover-ease),height var(--hover-dur) var(--hover-ease);
  pointer-events:none;
}
#guide-card{
  position:fixed;
  width:21.25rem;
  max-width:calc(100vw - 1rem);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  padding:var(--sp-4) 1.125rem 1.125rem;
}
#guide-card h3{margin:var(--sp-2) 0 .375rem;font-size:var(--fs-body);color:var(--text);}
#guide-card p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--muted);}
.guide-card-head{display:flex;align-items:center;gap:var(--sp-2);}
.guide-count{font-size:var(--fs-micro);color:var(--muted);}
.guide-x{
  margin-inline-start:auto;
  border:none;
  background:none;
  color:var(--muted);
  font-size:var(--fs-body);
  cursor:pointer;
  line-height:1;
  padding:.125rem var(--sp-1);
}
.guide-x:hover{color:var(--text);}
.guide-card-foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);}
.guide-nav{display:flex;gap:var(--sp-2);margin-inline-start:auto;}
.guide-card-foot .btn:disabled{opacity:.45;cursor:not-allowed;}
@media (prefers-reduced-motion:reduce){
  #guide-spot{transition:none;}
}