/* fm-define.css — inline jargon definitions.
 *
 * Its own file, same reason fm-checklist.css is: app.css is twenty thousand
 * lines and its end is where every parallel stream appends. Everything here is
 * namespaced .fm-def* and applies to no other component.
 *
 * The underlined term has to read as tappable without shouting. A dotted
 * underline in the accent colour is enough on a page that is mostly prose --
 * a button-looking button every third sentence would make the page unreadable,
 * which is the opposite of the point.
 */

.fm-def {
  border: none;
  background: none;
  padding: 0 1px;
  margin: 0;
  font: inherit;
  color: var(--fm-navy);
  font-weight: 600;
  cursor: help;
  border-bottom: 2px dotted var(--fm-red);
  border-radius: 2px;
}
.fm-def:hover { background: color-mix(in srgb, var(--fm-red) 9%, transparent); }
.fm-def[aria-expanded="true"] { background: color-mix(in srgb, var(--fm-red) 16%, transparent); }
.fm-def:focus-visible { outline: 2px solid var(--fm-navy); outline-offset: 2px; }

.fm-def-pop {
  position: absolute;
  z-index: 200;
  width: min(360px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--fm-border-strong);
  border-left: 4px solid var(--fm-red);
  border-radius: var(--fm-radius);
  box-shadow: 0 12px 40px rgba(15, 46, 77, .22);
  padding: 16px 18px;
}

.fm-def-term {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--fm-navy);
  letter-spacing: -.2px;
}
.fm-def-what { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fm-text); }
.fm-def-why {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fm-muted);
}
.fm-def-like {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--fm-border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fm-text);
}
.fm-def-likelabel {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--fm-red);
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .fm-def-pop { padding: 14px 15px; }
}