/* drawlegal.com: one set of tokens for the site and both drawing apps.
   Light, because the thing being made is black line work on white paper and a dark
   chrome around it lies about what will print. Everything else is thin, flat and quiet. */
:root {
  color-scheme: light;
  --ink: #0b0e14;
  --ink-2: #414a5a;
  --ink-3: #6f7a8c;
  --paper: #ffffff;
  --ground: #f4f6f9;
  --ground-2: #eaeef4;
  --line: rgba(11, 14, 20, .12);
  --line-2: rgba(11, 14, 20, .07);
  --accent: #2348ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(35, 72, 255, .09);
  --accent-2: #00b3bb;
  --warn: #9a4b00;
  --bad: #b0261d;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(11, 14, 20, .05), 0 12px 32px -18px rgba(11, 14, 20, .35);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tight: .01em;
  --wide: .14em;
}

/* The (?). One mark for every explanation on this site, in both apps and on every page.
   Nothing long is ever printed next to a control; it goes in here. */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font: 600 10px/1 var(--mono);
  cursor: help;
  vertical-align: middle;
  padding: 0;
  flex: none;
  transition: color .12s, border-color .12s, background .12s;
}
.help:hover, .help:focus-visible, .help[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
.help-bubble {
  position: fixed;
  z-index: 9999;
  max-width: min(340px, calc(100vw - 24px));
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: var(--tight);
}
.help-bubble[hidden] { display: none; }