/*
 * Sorivelo icons (handoff 2.4): line icons on a 24 grid, stroke 1.8, round
 * caps and joins, 16px by default and 18px on the sidebar rail. Shapes are
 * in static/sv/icons.svg; put them on a page with {{icon "name"}} in a
 * template or svIcon('name') in JS. Icons take the text color.
 */
.sv-icon {
  display: inline-block;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sizes the designs use besides the 16px default */
.sv-icon-12 { width: 12px; height: 12px; }
.sv-icon-13 { width: 13px; height: 13px; }
.sv-icon-14 { width: 14px; height: 14px; }
.sv-icon-18,
.sv-icon-rail { width: var(--icon-rail); height: var(--icon-rail); }
.sv-icon-20 { width: 20px; height: 20px; }
.sv-icon-24 { width: 24px; height: 24px; }
.sv-icon-26 { width: 26px; height: 26px; }

/* Heavier check marks inside small filled tiles (checkboxes, done ticks) */
.sv-icon-bold { stroke-width: 3; }

/* Lighter line for large empty-state icons */
.sv-icon-thin { stroke-width: 1.5; }

/* Filled shape, for example a starred star */
.sv-icon-fill { fill: currentColor; }

/* The spark in violet: AI features only, never a gradient */
.sv-icon-ai { color: var(--violet); }